import BsButton from "@lib/Button";
import CheckBox from "@lib/CheckBox";
import { ButtonGroup, ButtonToolbar, InputGroup } from "@lib/Group";
import TextBox from "@lib/TextBox";
import type { RouteDefinition } from "@solidjs/router";

const ButtonGroupDemo = () => {
  return (
    <div>
      <h2>Basic</h2>
      <div class="d-flex grid gap-3">
        {/* <div class="btn-group" role="group" aria-label="Basic example">
          <button type="button" class="btn btn-primary">
            Left
          </button>
          <button type="button" class="btn btn-primary">
            Middle
          </button>
          <button type="button" class="btn btn-primary">
            Right
          </button>
        </div> */}
        <ButtonGroup>
          <BsButton>Left</BsButton>
          <BsButton>Middle</BsButton>
          <BsButton>Right</BsButton>
        </ButtonGroup>
      </div>
      <h2>Active</h2>
      <div class="d-flex grid gap-3">
        {/* <div class="btn-group" role="group" aria-label="Basic example">
          <button type="button" class="btn btn-primary">
            Left
          </button>
          <button type="button" class="btn btn-primary">
            Middle
          </button>
          <button type="button" class="btn btn-primary">
            Right
          </button>
        </div> */}
        <ButtonGroup>
          <BsButton active>Left(Active)</BsButton>
          <BsButton>Middle</BsButton>
          <BsButton>Right</BsButton>
        </ButtonGroup>
      </div>
      <h2>Mixed Styles</h2>
      <div class="d-flex grid gap-3">
        <ButtonGroup>
          <BsButton variant="danger">Left</BsButton>
          <BsButton variant="warning">Middle</BsButton>
          <BsButton variant="success">Right</BsButton>
        </ButtonGroup>
      </div>
      <h2>Outline Styles</h2>
      <div class="d-flex grid gap-3">
        <ButtonGroup>
          <BsButton outline>Left</BsButton>
          <BsButton outline>Middle</BsButton>
          <BsButton outline>Right</BsButton>
        </ButtonGroup>
      </div>

      <h2>Checkbox and radio button groups</h2>
      <div class="d-flex grid gap-3">
        <ButtonGroup>
          <CheckBox
            name="example"
            autocomplete="off"
            id="example1"
            classList={{ "btn-check": true }}
          >
            <label for="example1" class="btn btn-outline-primary">
              Checkbox 1
            </label>
          </CheckBox>
          <CheckBox
            name="example"
            autocomplete="off"
            id="example2"
            classList={{ "btn-check": true }}
          >
            <label for="example2" class="btn btn-outline-primary">
              Checkbox 2
            </label>
          </CheckBox>
          <CheckBox
            name="example"
            autocomplete="off"
            id="example3"
            classList={{ "btn-check": true }}
          >
            <label for="example3" class="btn btn-outline-primary">
              Checkbox 3
            </label>
          </CheckBox>
        </ButtonGroup>

        <ButtonGroup>
          <CheckBox.Radio
            name="radio-example"
            autocomplete="off"
            id="radio-example1"
            classList={{ "btn-check": true }}
          >
            <label for="radio-example1" class="btn btn-outline-primary">
              Radio 1
            </label>
          </CheckBox.Radio>
          <CheckBox.Radio
            name="radio-example"
            autocomplete="off"
            id="radio-example2"
            classList={{ "btn-check": true }}
          >
            <label for="radio-example2" class="btn btn-outline-primary">
              Radio 2
            </label>
          </CheckBox.Radio>
          <CheckBox.Radio
            name="radio-example"
            autocomplete="off"
            id="radio-example3"
            classList={{ "btn-check": true }}
          >
            <label for="radio-example3" class="btn btn-outline-primary">
              Radio 3
            </label>
          </CheckBox.Radio>
        </ButtonGroup>
      </div>
      <h2>Button toolbar</h2>
      <div class="d-flex grid gap-3 mb-3">
        <ButtonToolbar>
          <ButtonGroup class="btn-group me-2">
            <BsButton>1</BsButton>
            <BsButton>2</BsButton>
            <BsButton>3</BsButton>
            <BsButton>4</BsButton>
          </ButtonGroup>
          <ButtonGroup class="btn-group me-2">
            <BsButton variant={"secondary"}>5</BsButton>
            <BsButton variant={"secondary"}>6</BsButton>
            <BsButton variant={"secondary"}>7</BsButton>
          </ButtonGroup>
          <ButtonGroup class="btn-group me-2">
            <BsButton variant={"danger"}>8</BsButton>
          </ButtonGroup>
        </ButtonToolbar>
      </div>
      <div class="d-flex grid gap-3 mb-3">
        <ButtonToolbar>
          <ButtonGroup class="btn-group me-2">
            <BsButton outline>1</BsButton>
            <BsButton outline>2</BsButton>
            <BsButton outline>3</BsButton>
            <BsButton outline>4</BsButton>
          </ButtonGroup>
          <InputGroup>
            <div class="input-group-text" id="btnGroupAddon2">
              @
            </div>
            <TextBox></TextBox>
          </InputGroup>
        </ButtonToolbar>
      </div>
      <h2>Sizing</h2>
      <div class="d-flex grid gap-3 mb-3">
        <ButtonGroup size="lg">
          <BsButton outline variant="dark">
            Left
          </BsButton>
          <BsButton outline variant="dark">
            Middle
          </BsButton>
          <BsButton outline variant="dark">
            Right
          </BsButton>
        </ButtonGroup>
      </div>
      <div class="d-flex grid gap-3 mb-3">
        <ButtonGroup>
          <BsButton outline variant="dark">
            Left
          </BsButton>
          <BsButton outline variant="dark">
            Middle
          </BsButton>
          <BsButton outline variant="dark">
            Right
          </BsButton>
        </ButtonGroup>
      </div>
      <div class="d-flex grid gap-3 mb-3">
        <ButtonGroup size="sm">
          <BsButton outline variant="dark">
            Left
          </BsButton>
          <BsButton outline variant="dark">
            Middle
          </BsButton>
          <BsButton outline variant="dark">
            Right
          </BsButton>
        </ButtonGroup>
      </div>
      <h2>Vertical</h2>
      <div class="d-flex grid gap-3">
          <ButtonGroup vertical>
            <BsButton variant="dark">Button</BsButton>
            <BsButton variant="dark">Button</BsButton>
            <BsButton variant="dark">Button</BsButton>
            <BsButton variant="dark">Button</BsButton>
            <BsButton variant="dark">Button</BsButton>
            <BsButton variant="dark">Button</BsButton>
            <BsButton variant="dark">Button</BsButton>
            <BsButton variant="dark">Button</BsButton>
          </ButtonGroup>
      </div>
    </div>
  );
};

export const ButtonGroupDemoRoute: RouteDefinition = {
  path: "/button-group",
  component: ButtonGroupDemo,
};

export default ButtonGroupDemo;
